<!-- 通用 -->
<template>
  <div id="General">
    <Head BackType1="1" title="通用"></Head>
    <div id="InstallMain">
      <div class="InstallMainList">
        <div class="InstallBox BoxActive" v-for="(Title,index) in Titles" :key="index" @click="GotoDetails(index)">
          <div class="InstallBoxList">
            <div class="InstallTitle">{{Title}}</div>
            <img src="@/assets/img/ArrowRight.png" alt="">
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
  import Head from "../components/Head"
  import { Dialog } from 'vant';
  export default {
    data(){
      return{
        Titles:['聊天背景','一键清除聊天记录',]
      }
    },
    components:{
      Head,
      [Dialog.name]:Dialog
    },
    mounted(){
      
    },
    methods:{
      GotoDetails(index){
        console.log(index)
        if(index == 0){
          this.$router.push('/ChatBackground')
        }else if(index == 1){
          Dialog.confirm({
            title: '提示',
            message: '将一键清除所有个人和群的聊天记录'
          }).then(() => {
            console.log(1)
          }).catch(() => {
            console.log(2)
          });
        }
      }
    }
  }
</script>

<style scoped lang="less">
#General{
  font-size: 32px;
  #InstallMain{
    width: 750px;
    position: fixed;
    top: 88px;
    overflow: scroll;
    .InstallMainList{
        background: #fff;
        width: 750px;
      .InstallBox{
        padding-left: 30px;
        height: 91px;
        &:first-child{
          margin-top: 10px;
        }
        &:last-child .InstallBoxList{
          border:0;
        }
        .InstallBoxList{
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          flex-direction: row;
          height: 90px;
          align-items: center;
          justify-content: space-between;
          img{
            width: 14px;
            height: 22px;
            margin-right: 30px;
          }
          
        }
        
      }
    }
    
  }
}
</style>